<div id="bar_wrapper" class="draggable">
    <div class="grading_toolbar">

        {# Nav buttons #}

        {# Previous buttons #}
        <a href="javascript:gotoPrevStudent(true);" data-href="{{ prev_ungraded_student_url }}" id="prev-ungraded-student"><i title="Previous assigned ungraded student" class="fas fa-backward icon-header"></i></a>
        <a href="javascript:gotoPrevStudent();" data-href="{{ prev_student_url }}" id="prev-student"><i title="Previous student" class="fas fa-caret-left icon-header"></i></a>

        {# Back to list button #}
        <a href="{{ home_url }}"><i title="Go to the main page" class="fas fa-home icon-header" ></i></a>

        {# Next buttons #}
        <a href="javascript:gotoNextStudent();" data-href="{{ next_student_url }}" id="next-student"><i title="Next student" class="fas fa-caret-right icon-header"></i></a>
        <a href="javascript:gotoNextStudent(true);" data-href="{{ next_ungraded_student_url }}" id="next-ungraded-student"><i title="Next assigned ungraded student" class="fas fa-forward icon-header"></i></a>

        {# /Nav buttons #}

        {# Panel buttons #}
        <button title="Reset Rubric Panel Positions (Press R)" class="invisible-btn" onclick="resetModules(); updateCookies();"> <i class="fas fa-redo icon-header" ></i> </button>
        <button title="Show/Hide Autograding Testcases (Press A)" class="invisible-btn" onclick="toggleAutograding(); updateCookies();"> <i class="fas fa-list icon-header" ></i> </button>
        <button title="Show/Hide Grading Rubric (Press G)" class="invisible-btn" onclick="toggleRubric(); updateCookies();"> <i class="fas fa-edit icon-header" ></i> </button>
        <button title="Show/Hide Submission and Results Browser (Press O)" class="invisible-btn" onclick="toggleSubmissions(); updateCookies();"> <i class="fas fa-folder-open icon-header" ></i> </button>
        {% if not peer %}
            <button title="Show/Hide Student Information (Press S)" class="invisible-btn" onclick="toggleInfo(); updateCookies();"> <i class="fas fa-user icon-header" ></i> </button>
        {% endif %}
        {% if discussion_based %}
            <button title="Show/Hide Discussion Posts" class="invisible-btn" onclick="toggleDiscussion(); updateCookies();"> <i class="fas fa-comment-alt icon-header" ></i> </button>
        {% endif %}
        {% if regrade_panel_available %}
            <button title="Show/Hide Grade Inquiry Information (Press X)" class="invisible-btn" onclick="toggleRegrade(); updateCookies();"> <i class="fas {{ grade_inquiry_pending ? 'fa-exclamation' : 'fa-hand-paper' }} grade_inquiry_icon icon-header" ></i> </button>
        {% endif %}
        <button title="Show Grading Settings" class="invisible-btn" onclick="showSettings();"> <i class="fas fa-wrench icon-header" ></i> </button>
        {# /Panel buttons #}
    </div>

    <div class="progress_bar">
        <progress class="progressbar" max="100" value="{{ progress }}" style="width:70%; height: 100%;"></progress>
        <div class="progress-value" style="display:inline;"></div>
    </div>
</div>
